<template>
  <div class="list">
    <!-- <div class="pager-title">{{$route.meta.title}}</div> -->
    <div class="section">
      <el-table
        :data="tableData"
        v-loading="isLoading"
        @sort-change="sortList"
        style="width: 100%;">
        <el-table-column
          align="center"
          prop="id"
          sortable="custom"
          label="ID">
        </el-table-column>
        <el-table-column
          sortable="custom"
          align="center"
          prop="contract_name"
          label="委托书名称">
        </el-table-column>
        <el-table-column
          sortable="custom"
          align="center"
          prop="contract_no"
          label="编号">
        </el-table-column>
        <el-table-column
          sortable="custom"
          align="center"
          show-overflow-tooltip
          prop="time_add"
          :formatter="formatTime"
          label="生成时间">
        </el-table-column>
        <el-table-column
          sortable="custom"
          align="center"
          show-overflow-tooltip
          prop="status_sign"
          label="状态">
        </el-table-column>
        <el-table-column
          align="center"
          width="180px"
          label="操作">
          <template slot-scope="scope">
            <!-- <el-tooltip :manual="true" :value="currentStep === 4" effect="dark" placement="top-start">
              <div slot="content" class="tip"><div>步骤 {{currentStep}}/4</div> <div>请签署委托书</div></div>
              <el-button size="mini" type="primary" @click="doSign(scope.row)">签约</el-button>
            </el-tooltip> -->
            <el-button type="primary" size="mini" @click="download(scope.row)">下载</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="pageIndex"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import tableMixin from '@/common/mixins/tableData'
import { mapGetters } from 'vuex'
export default {
  name: 'list',
  mixins: [tableMixin],
  data() {
    return {
      listApi: '/personal/contract/trust'
    }
  },
  computed: {
    ...mapGetters([
      'currentStep'
    ])
  },
  methods: {
    download(row) {
      this.$http.get(`/personal/contract/download/${row.id}`).then(res => {
        if (res.status === 1) {
          window.open(res.data.docs[0].fileUrl)
        }
      })
    }
  }
}
</script>